<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .stripes {
            height: 250px;
            width: 375px;
            float: left;

            margin: 10px;

            -webkit-background-size: 50px 50px;
            -moz-background-size: 50px 50px;
            background-size: 50px 50px; /* 控制条纹的大小 */

            -moz-box-shadow: 1px 1px 8px gray;
            -webkit-box-shadow: 1px 1px 8px gray;
            box-shadow: 1px 1px 8px gray;
        }
        .angled-135 {
            /*background-color: #c16;*/
            background-color: #f63449;
            /*background-color: #00e5dd;*/
            /*background-image: -webkit-gradient(linear, 0 0, 100% 100%,*/
            /*color-stop(.25, #f63449), color-stop(.25, #00e5dd),*/
            /*color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),*/
            /*color-stop(.5, #f63449), color-stop(.5, #00e5dd),*/
            /*color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),*/
            /*color-stop(.75, #f63449), color-stop(.75, #00e5dd),*/
            /*color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),*/
            /*to(#00e5dd));*/
            /*background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,*/
            /*transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,*/
            /*transparent 75%, transparent);*/
            /*background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,*/
            /*transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,*/
            /*transparent 75%, transparent);*/
            /*background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,*/
            /*transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,*/
            /*transparent 75%, transparent);*/

            background-image:-webkit-gradient(0deg,#f63449 25%,transparent 25%,transparent 50%,#fff 50%,#00e5dd 75%,transparent 75%);
        }
    </style>
</head>
<body>
<!--<div class="horizontal stripes"></div>-->
<!--<div class="vertical stripes"></div>-->
<!--<div class="picnic stripes"></div>-->
<!--<div class="angled stripes"></div>-->
<div class="angled-135 stripes"></div>
<!--<div class="checkered stripes"></div>-->
</body>
</html>